<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    // 点击.box alert 相应下标
    var box=document.getElementsByTagName('box')
    for(var i=0;i<box.length;i++){
        box[i].index=i
        box[i].onclick=function(){
            alert(this.index)
        }
    }
    /*
        1.let拥有块级作用域
        2.不存在变量提前声明
        3.不能重复声明
        4.不影响作用域链
    */ 
   for(let i=0;i<box.length;i++){
       box[i].onclick=function(){
           alert(i)
       }
   }
   {
       let girl='班长'

   }
//    console.log(girl);
//    var girl='班长'
//    console.log(yuzong);
   let yuzong='wdqd'

   let yuzong='比我帅'

   {
       let girl='班长'
       function fn(){
           console.log(girl);

       }
       fn()
   }
//    const常量
// 声明形式除了函数fn外全部大写
const SCHOOL='KW06'
// CONST 不能被修改  可以修改对象数组的值
// 块级作用域
// SCHOOL='不是'
{
    const BOY='ddd'

}
const ZHANG=['张明非','男人','穷人']
ZHANG.PUSH('未婚')
console.log(ZHANG);

function laojiang(a,b=1){
    console.log(a+b);
}
laojiang(1,3)

let name='班长'
let change=function(){
    console.log('真漂亮');
}
// const SCHOOL={
    // name:name
    // change:change
// }
const SCHOOL={name,change}
console.log(SCHOOL);

// var fn=function(){}
// let fn=()=>{}
const SCHOOL={
    name:'渣男'
}
window.name='123'
console.log(this);
function getName(){
    console.log(this.name);
}
getName()

let getName2=()=>{
    console.log(this.name);
}
getName2()

getName.call(SCHOOL)
getName2.call(SCHOOL)

/*
    箭头函数开始this指向某一对象后就不会改变当前this
    箭头函数不能作为构造函数实例化对象
    箭头函数只有一个参数可以省略左右括号
    箭头函数里面只有一句话可以省略大括号 return可省略
*/ 

let Person=(name,age)=>{
    this.name=name;
    this.age=age;
}
let zhanan=new Person('王思聪','wdqwdq')
console.log(zhanan);
let fn=q=>q+q
console.log(fn(3));

const DUIXIANG=['蒋富涛','有钱','有老婆']
let [a,b,c]=DUIXIANG
console.log(a,b,c);
// 对象解构给变量
const ZHANG={
    name:'zhang',
    age:'99',
    kanren:function(){
        console.log('w');
    }
}
let {name,age,kanren}=ZHANG;
console.log(name);
console.log(age);
console.log(kanren);
kanren()

const BANZHANG=['1','2']
console.log(...BANZHANG);
// 应用场景
const A=['1','2']
const B=['3','4']
let C=A.concat(B)
console.log(C);
// 深拷贝
const D=[...A]
console.log(D);
D[0]='5'
console.log(D);
console.log(A);
// 将DOM的为数组变成真数组
let divs=document.getElementsByTagName('div')
console.log(divs);
const divArr=[...divs]
console.log(divArr);
let out='徐衍行'
let love=`${out}爱老婆`
console.log(love);

// object.assign()
// 将多个对象的属性和方法都合并到目标对象上面
// 格式（目标对象，后面跟着多个或者一个原对象）
let target={}
let name1={
    name:'img',
    age:'123'
}
let name2={
    sex:'男'
}
let name3={
    sex:'女'
}
Object.assign(target,name1,name2,name3)
console.log(target);
</script>
</html>